// @ts-nocheck
import { Menu, Dropdown } from 'antd';
import { GlobalOutlined } from '@ant-design/icons';
import { ClickParam } from 'antd/es/menu';

import { getLocale, getAllLocales, setLocale } from './localeExports';

interface LocalData {
  lang: string,
  label?: string,
  icon?: string,
  title?: string,
}

interface SelectLangProps {
  globalIconClassName?: string;
  postLocalesData?: (locales: LocalData[]) => LocalData[];
  onItemClick?: (params: ClickParam) => void;
  className?: string;
  reload?: boolean;
}

const defaultLangUConfigMap = {
  'en-US': {
    lang: 'en-US',
    label: 'English',
    icon: '🇺🇸',
    title: 'Language'
  },
  'zh-CN': {
    lang: 'zh-CN',
    label: '简体中文',
    icon: '🇨🇳',
    title: '语言'
  },
  'zh-TW': {
    lang: 'zh-TW',
    label: '繁體中文',
    icon: '🇭🇰',
    title: '語言'
  }
}

const SelectLang: React.FC<SelectLangProps> = (props) => {
  const {
    postLocalesData,
    onItemClick,
    reload
  } = props;
  // ...restProps   globalIconClassName,

  const defaultLangUConfig = getAllLocales().map(
      (key) =>
        defaultLangUConfigMap[key] || {
          lang: key,
          label: key,
          icon: "🌐",
          title: key,
        }
    );

  const selectedLang = getLocale();

  const changeLang = ({ key }: ClickParam): void => setLocale(key, reload);

  const allLangUIConfig = postLocalesData?.(defaultLangUConfig) || defaultLangUConfig;
  const handleClick = onItemClick ? (params: ClickParam) => onItemClick(params) : changeLang;

  const langMenu = (
    <Menu selectedKeys={[selectedLang]} onClick={handleClick}>
      {allLangUIConfig.map((localeObj) => {
        return (
          <Menu.Item key={localeObj.lang || localeObj.key}>
            <span role="img" aria-label={localeObj?.label || "en-US"}>
              {localeObj?.icon || "🌐"}
            </span>
            {localeObj?.label || "en-US"}
          </Menu.Item>
        );
      })}
    </Menu>
  );

  return (
    <Dropdown overlay={langMenu}>
      <div className="ant-dropdown-link" onClick={e => e.preventDefault()}>
        <GlobalOutlined style={{ fontSize: '18px'}} />
      </div>
    </Dropdown>
  )
}

export default SelectLang;
